<!--
  @texttion: canvas动画菜单
  @Date：2022年12月13日 12:51:36
-->
<template>
  <section :class="['canvas-menu-page']" :id="id">
    <div :class="['left-menu']" :style="`transform: scale(${scaleNum});  ${isMobile ? 'margin:' + -570 * (1 - scaleNum) * 0.4 +'px 0' : ''}`">
      <p class="center-text" style="margin-bottom: 6px">
        PRODUCT <br />
        SERVICE
      </p>
      <p class="center-text">产品服务</p>
      <MenuItem
        style="
          bottom: 50%;
          left: 50%;
          transform-origin: center;
          transform: translate3d(-50%, -90px, 0);
        "
        :isSelected="currentIndex === 0"
      >
        <span
          style="
            bottom: 40%;
            left: 50%;
            transform-origin: center;
            transform: translate3d(-50%, -50%, 0);
          "
          :class="['menu-text', { 'current-text': currentIndex === 0 }]"
        >
          规划资询
        </span>
      </MenuItem>
      <MenuItem
        style="
          bottom: 50%;
          left: 50%;
          transform-origin: 50% 100%;
          transform: translate3d(-65px, -43px, 0px) rotateZ(60deg);
        "
        :isSelected="currentIndex === 1"
      >
        <span
          style="
            bottom: 50%;
            left: 50%;
            transform-origin: center;
            transform: translate3d(-50%, -50%, 0) rotateZ(-60deg);
            vertical-align: center;
          "
          :class="['menu-text', { 'current-text': currentIndex === 1 }]"
        >
          教育培训
        </span>
      </MenuItem>
      <MenuItem
        style="
          top: 50%;
          left: 50%;
          transform-origin: 50% 100%;
          transform: translate3d(-65px, -114px, 0px) rotateZ(120deg);
        "
        :isSelected="currentIndex === 2"
      >
        <span
          style="
            bottom: 50%;
            left: 50%;
            transform-origin: center;
            transform: translate3d(-50%, -50%, 0) rotateZ(-120deg);
          "
          :class="['menu-text', { 'current-text': currentIndex === 2 }]"
        >
          前沿资讯
        </span>
      </MenuItem>
      <MenuItem
        style="
          top: 50%;
          left: 50%;
          transform-origin: center;
          transform: translate3d(-50%, 90px, 0) rotateZ(180deg);
        "
        :isSelected="currentIndex === 3"
      >
        <span
          style="
            bottom: 40%;
            left: 50%;
            transform-origin: center;
            transform: translate3d(-50%, -50%, 0) rotateZ(180deg);
          "
          :class="['menu-text', { 'current-text': currentIndex === 3 }]"
        >
          研究成果
        </span>
      </MenuItem>
      <MenuItem
        style="
          top: 50%;
          right: 50%;
          transform-origin: 50% 100%;
          transform: translate3d(65px, -114px, 0px) rotateZ(240deg);
        "
        :isSelected="currentIndex === 4"
      >
        <span
          style="
            bottom: 50%;
            left: 50%;
            transform-origin: center;
            transform: translate3d(-50%, -50%, 0) rotateZ(-240deg);
          "
          :class="['menu-text', { 'current-text': currentIndex === 4 }]"
        >
          实践项目
        </span>
      </MenuItem>
      <MenuItem
        style="
          bottom: 50%;
          right: 50%;
          transform-origin: 50% 100%;
          transform: translate3d(65px, -43px, 0px) rotateZ(300deg);
        "
        :isSelected="currentIndex === 5"
      >
        <span
          style="
            bottom: 50%;
            left: 50%;
            transform-origin: center;
            transform: translate3d(-50%, -50%, 0) rotateZ(-300deg);
            vertical-align: center;
          "
          :class="['menu-text', { 'current-text': currentIndex === 5 }]"
        >
          海外服务
        </span>
      </MenuItem>
      <div
        style="
          position: absolute;
          top: 0;
          left: 0;
          display: block;
          width: 600px;
          height: 570px;
          z-index: 2;
        "
      >
        <img
          :usemap="'#' + mapId"
          ismap
          src="./image/map.png"
          style="display: block; width: 600px; height: 570px"
        />
        <map :name="mapId" :id="mapId">
          <area
            v-for="(item, index) in coordsList"
            :key="index"
            shape="poly"
            :coords="item.join(',')"
            style="cursor: pointer"
            @click="linkTo(index)"
            @mouseenter="setIndex(index)"
          />
        </map>
      </div>
    </div>
    <div
      :class="['right-content', { smallRight: isSmallScreen }]"
      @click="linkTo(currentIndex)"
      :style="`margin-left: -${!isMobile && scaleNum < 1 ? (600 - (scaleNum * 600)) > 195 ? 195 : 0 : 0}px;`"
    >
      <img class="left-icon"  src="./image/icon.png" alt="" srcset="" />
      <div class="text-content">
        <div class="title">{{ currentItem.en }}</div>
        <div class="subTitle">{{ currentItem.cn }}</div>
        <img class="tips-icon" src="./image/tips.png" alt="" />
        <div class="text">
          {{ currentItem.text }}
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import MenuItem from "./menuItem.vue";
export default {
  // 组件名称
  name: "canvasMenu",
  props: {
    id: {
      type: String,
      default: 'canvas-menu-page'
    },
    mapId: {
      type: String,
      default: 'canvasMenu'
    }
  },
  data() {
    return {
      currentIndex: 0,
      menuList: [
        {
          cn: "规划资询",
          en: "Planning and Consultation",
          text: "数据学徒结合广大学生的求职意向和企业客户的自身特点，提供定制化求职和招聘咨询服务，为学生打造值得托付、贴心满意的就业解决方案，同时为企业量身打造“个性化人才引擎”，降低人才招聘成本，激发企业腾飞原动力。",
        },
        {
          cn: "教育培训",
          en: "Education and training",
          text: "学界顶级教授和业界资深专家强强联合，通过专题讲座、课程培训等方式，提升学生专业能力，指点学生职业发展。作为专业的培训与教学平台，数据学徒平台围绕企业发展战略需求及企业人才短板，通过特色培训、主题项目创新开发等对人才进行潜质培养，为企业量身打造“定制化人才”，为企业发展助力赋能。",
        },
        {
          cn: "前沿资讯",
          en: "Information Frontline",
          text: "数据学徒聚焦最前沿、最真实的数据科技行业动态，详细解读各类行业和招聘政策。此外，数据学徒将定期举办各类培训和讲座活动，帮助“数据学徒”们快人一步获取更丰富、详细的求职资讯。",
        },
        {
          cn: "研究成果",
          en: "Research findings",
          text: "数据学徒平台凭借雄厚的研究实力和海量数据人才招聘数据，对中国上市企业人才需求，地区人力资源布局、产业发展等进行深入分析，提供企业战略发展、地区产业发展及人才战略规划方案。数据学徒平台已经发布《2022年中国上市公司招聘研究报告》。",
        },
        {
          cn: "实践项目",
          en: "Practical projects",
          text: "数据学徒作为一个汇聚真实数据、数据企业以及数字人才的综合型平台。实践项目目的在于推动数据人才的培养、挖掘优秀的数据人才、加速产学研的结合。面向全世界“数据学徒”们提供最真实、最前沿的行业数据，提供最贴近实操的数据分析项目。",
        },
        {
          cn: "海外服务",
          en: "Overseas services",
          text: "数据学徒利用自身优质校企资源，携手全球名企精英和高校专家，为海外留学生您打造一对一专属求职方案，帮助广大学子打破行业和企业信息壁垒，明确职业发展路线，提升专业技能和综合竞争力，少走弯路，轻松斩获心仪offer！",
        },
      ],
      coordsList: [
        [168, 30, 446, 30, 343, 197, 255, 197],
        [353, 198, 442, 42, 572, 279, 398, 281],
        [395, 290, 580, 290, 443, 526, 353, 367],
        [256, 375, 345, 375, 443, 542, 164, 542],
        [203, 291, 246, 365, 151, 527, 15, 290],
        [246, 202, 366, 247, 15, 278, 151, 32],
      ],
      innerHeight: window.innerHeight,
      boxHeight: 0,
      scaleNum: 1,
      isMobile: false,
    };
  },
  components: { MenuItem },
  computed: {
    currentItem() {
      return this.menuList[this.currentIndex];
    },
    isSmallScreen() {
      return this.innerHeight < 876;
    },
  },
  methods: {
    resetCanvasMenuHeight() {
      if (this.isMobile) {
        const boxWidth = document.getElementById(this.id).clientWidth;
        this.scaleNum = (boxWidth / 375 ) * 0.46;
        return
      }
      this.boxHeight = document.getElementById(this.id).clientHeight;
      if (this.boxHeight >= 570) {
        this.scaleNum = 1;
      } else if (this.boxHeight < 570) {
        this.scaleNum = this.boxHeight / 570;
      }
    },
    rotateStyle(index) {
      return `transform: rotateZ(${index * 60}deg);`;
    },
    setIndex(index) {
      if (this.isMobile) return
      this.currentIndex = index;
    },
    linkTo(index) {
      if (this.isMobile && this.currentIndex !== index) {
        this.currentIndex = index;
        return
      }
      if (index === 5) {
        this.$router.push({ path: "/cultivate?type=1&url=overseaServices" });
      } else if (index === 0) {
        this.$router.push({ name: "studentConsultation", query: { type: 1 } });
      } else if (index === 1) {
        this.$router.push({ name: "cultivate", query: { type: 1, url: 'provideTraining' } });
      } else if (index === 4) {
        let clientW = document.body.clientWidth;
        if (clientW > 768) {
          this.$router.push({ name: "productManage" });
        } else {
          this.$message.warning("请到PC端进行操作～");
        }
      } else if (index === 2) {
        this.$router.push({ name: "newsAction" });
      } else if (index === 3) {
        this.$router.push({ name: "researchResult" });
      }
    },
    judgeMobile() {
      if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
        // 当前设备是移动设备
        this.isMobile = true
      } else {
        this.isMobile = false
      }
    },
  },
  mounted() {
    this.judgeMobile()
    this.resetCanvasMenuHeight();
    window.addEventListener("resize", (e) => {
      this.innerHeight = e.target.innerHeight;
      this.judgeMobile()
      this.resetCanvasMenuHeight();
    });
    this.innerHeight = window.innerHeight;
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.canvas-menu-page {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  .left-menu {
    position: relative;
    // 禁止修改容器宽高，会导致所有坐标不准确
    width: 600px;
    height: 570px;
    margin-right: 92px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    .center-text {
      font-size: 19px;
      font-family: Arial;
      font-weight: bold;
      color: #9c9c9c;
      line-height: 19px;
    }
    .menu-text {
      position: absolute;
      font-size: 18px;
      font-family: "Adobe Heiti Std";
      font-weight: normal;
      color: #ffffff;
      line-height: 18px;
    }
    .current-text {
      font-size: 24px;
      line-height: 18px;
    }
  }
  .right-content {
    position: relative;
    flex: 1;
    overflow: hidden;
    cursor: pointer;
    .left-icon {
      float: left;
      margin-right: 19px;
      width: 17px;
      height: 31px;
    }
    .text-content {
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
      overflow: hidden;
      .title {
        font-size: 30px;
        font-family: "Adobe Heiti Std";
        font-weight: normal;
        color: #000000;
        line-height: 24px;
        text-align: left;
        margin-bottom: 10px;
      }
      .subTitle {
        font-size: 28px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #000000;
        line-height: 27px;
        text-align: left;
      }
      .tips-icon {
        width: 82px;
        height: 9px;
        margin: 21px 0;
      }
      .text {
        font-size: 18px;
        font-family: "AlibabaPuHuiTi_2_35_Thin";
        font-weight: 400;
        color: #4c4c4c;
        text-align: left;
      }
    }
  }
}
.small {
  transform: scale(0.5);
  margin-right: 0 !important;
}
.smallRight {
  .title {
    font-size: 20px !important;
    line-height: 22px !important;
  }
  .subTitle {
    font-size: 18px !important;
    line-height: 20px !important;
  }
  .text {
    font-size: 16px !important;
  }
}

@media screen and (max-width: 750px) {
  .canvas-menu-page {
    padding: 0.35rem 0.34rem 0;
    height: auto;
    display: flex;
    flex-flow: column-reverse;
    justify-content: normal;
    align-items: center;
    .left-menu {
      margin-right: 0;
      margin-left: .1rem !important;
    }
    .right-content {
      .left-icon {
        margin-right: 0.19rem;
        width: 0.17rem;
        height: 0.31rem;
      }
      .title {
        margin-bottom: 0.1rem !important;
        font-size: 0.2rem !important;
        line-height: 0.2rem !important;
      }
      .subTitle {
        font-size: 0.18rem !important;
        line-height: 0.2rem !important;
      }
      .tips-icon {
        width: 0.82rem;
        height: 0.09rem;
        margin: 0.21rem 0;
      }
      .text {
        font-size: 0.16rem !important;
      }
    }
  }
}
</style>
